<template>
	<view class="lz-list" :class="APPTheme">
		<view class="lz-drawer" :class='APPTheme'>
			<view class="drawer-list drawer-list1">
				<view class="drawer-list-title theme-bg">
					<view>{{title}}</view>
					<view>
						<uni-icons v-if="titleIcon" :type="titleIcon" :size="iconSize" :color="iconColor" @click="clickFn('icon',titleIcon)"></uni-icons>
						<uni-icons v-if="titleIcon&&list.length>0" type="minus" :size="22" color="red" @click="clickFn('icon','minus')" style="margin-left: 15px;"></uni-icons>
					</view>
				</view>
				<scroll-view :scroll-top="10" scroll-y="true" class="scroll-Y" :style="{height:height}">
					<view class="title-list">
						<view class="title-list-item theme-bg-active" :style="{backgroundColor:activeId==item.id&&activeColor?activeColor:'',opacity:disabledId==item.id?0.5:1}" v-for="(item,index) in list" :key="index" @click="clickFn('listItem',item)">
							<view class="iconfont" :class="item.icon" :style="{color:item.color}"></view>
							<view class="title-list-text">{{item.name}}</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
let that
import {
	mapGetters,
	mapActions
} from 'vuex'
export default {
	components:{},
	props: {
		list: {
			type: Array,
			default:()=>{
				return []
			}
		},
		title: {//标题
			type: String,
			default: ''
		},
		activeColor:{//选中时的颜色
			type: String,
			default: ''
		},
		activeId:{
			type: [String,Number],
			default: ''
		},
		disabledId:{//当前id列不可点击
			type: [String,Number],
			default: ''
		},
		titleIcon:{//图标
			type: String,
			default: ''
		},
		iconSize:{
			type:Number,
			default: ()=>{
				return 0
			}
		},
		iconColor:{//图标
			type: String,
			default: ''
		},
		height:{//滚动区域高度
			type: String,
			default: '100%'
		},
	},
	data() {
		return {
		}
	},
	computed: {
		...mapGetters(['APPTheme', 'userInfo', 'api']),
	},
	mounted() {
		that = this
	},
	onShow() {
		//设置主题颜色
		that.GLOBAL.setThemeColor(that.APPTheme)
	},
	methods: {
		clickFn(type,item){
			console.log(item);
			let obj={
					type:type,
					center:item
				}
			that.$emit('click',obj)
			// uni.$emit('click-lz-list',item)
		},
	}
};
</script>

<style scoped lang="scss">
.lz-list{
	// 抽屉
	.lz-drawer{
		height: 100%;box-sizing: border-box;
		.drawer-list{
			.scroll-Y{
				z-index: 10000;
			}
			.drawer-list-title{
				font-size: $font_size-12;padding: 5px 15px;box-sizing: border-box;color: #888;display: flex;align-items: center;justify-content: space-between;
			}
			.title-list-item{
				display: flex;padding: 10px 15px;box-sizing: border-box;align-items: center;font-size: $font_size-14;
				.iconfont{
					font-size: $font_size-16;margin-right: 10px;
				}
				.title-list-text{
					width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;
				}
			}
		}
	}
}
</style>
